<script lang="ts" setup>
import moment from 'moment'
import { JobRecordApi } from '~/api/JobRecordApi'
import { JobRecordModel } from '~/model'

const route = useRoute()
const record = ref(null as JobRecordModel | null)
const worker = computed(() => record.value?.worker)
const date = computed(() => moment(record.value?.date).format('YYYY-MM-DD'))
const amount = computed(() => record.value?.actionParams[0])
const reason = computed(() => record.value?.actionParams[1])

onMounted(() => {
  JobRecordApi.getAll()
    .then((records) => {
      record.value = records.find(x => x.id === Number.parseInt(route.query.id as string))!

      window.setTimeout(() => {
        window.print()
      })
    })
})
</script>

<template>
  <div v-if="record && worker" bg-emerald-1>
    <div class="a4">
      <h1 mb2 text-center text-size-6 font-bold>
        辽西塑业工资支取申请表
      </h1>
      <table mb2 class="event-table">
        <tr>
          <td>姓名</td>
          <td>{{ worker.name }}</td>
          <td>联系电话</td>
          <td>{{ worker.phone }}</td>
        </tr>
        <tr>
          <td>日期</td>
          <td colspan="3">
            {{ date }}
          </td>
        </tr>
        <tr>
          <td>金额</td>
          <td colspan="3">
            {{ amount }}
          </td>
        </tr>
        <tr>
          <td>理由</td>
          <td colspan="3">
            {{ reason }}
          </td>
        </tr>
        <tr lh-3rem>
          <td>签字</td>
          <td colspan="3" />
        </tr>
      </table>
      <div>
        <span font-bold>注意：</span><br>
        <span ml>1. 签署此文件代表你已经完成了工资的支取，款项已经收到。</span><br>
        <span ml>2. 此文件将会作为你完成工资支取的证明。请仔细确认时间、金额等，如有疑问，请在签署文件时当面提出。<span font-bold>一经签署，不得更改</span>。</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.a4 {
  width: 210mm;
  height: 297mm;
  background-color: #fff;
  padding: 20mm;
}
.event-table {
  border-collapse: collapse;
  width: 100%;

  td {
    border: 1px solid black;
    padding: 0.25rem;
  }
}

@page {
  size: 210mm 297mm;
  // page-orientation: upright;
  // margin-left: 20mm;
}
</style>

<route lang="yaml">
meta:
  layout: nolayout
</route>
